<template>
<el-dialog :title="showTitle" :visible="isShowPer" @close="handleClose">
    <el-form
        ref="perForm"
        class="perForm"
        :model="formData"
        label-width="100px"
        :rules="formRules"
    >
        <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
            <el-input v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="启用状态">
            <el-switch v-model="formData.enVisible" active-value="1" inactive-value="0">
            </el-switch>
        </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
            <el-button size="small" type="primary" @click="handleSubmit">确定</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </el-col>
    </el-row>
</el-dialog>
</template>

<script>
import { getPerById, addPermission, updatePerById } from '@/api/permission.js'
export default {
	props: {
		isShowPer: {
			type: Boolean,
			required: true
		}
	},
	data() {
		return {
			/* 表单数据 */
			formData: {
				code: '',
				name: '',
				description: '',
				enVisible: '0',
				type: '',
				id: '',
				pid: '0'
			},
			/* 表单校验数据 */
			    formRules: {
			      name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
			      code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
			    }
		}
	},
	computed: {
		showTitle() {
			return this.formData.id === '' ? '新增权限' : '编辑权限'
		}
	},
	methods: {
		/* 取消 */
		handleClose() {
			this.formData = {
				code: '',
				name: '',
				description: '',
				enVisible: '0',
				type: '',
				id: '',
				pid: '0'
			}
			this.$refs.perForm.resetFields()
			this.$emit('update:isShowPer', false)
		},
		/* 提交 */
		handleSubmit() {
			this.$refs.perForm.validate(async(isOk) => {
				if (isOk) {
					if (this.formData.id) {
					// 有ID，编辑模式
						console.log('编辑模式')
						await updatePerById(this.formData.id, this.formData)
						this.$message.success('编辑权限完成')
					} else {
						await addPermission(this.formData)
						this.$message.success('添加权限完成')
					}
					await this.$emit('refresh')
					this.handleClose()
				}
			})
		},
		/* 编辑-获取权限信息 */
		async getPerList() {
			const res = await getPerById(this.formData.id)
			this.formData = res
		}
	}

}
</script>

<style>
</style>
